import React, { useEffect, useState ,Key} from "react";
import { Button,  Form, Input ,Card,message,Tooltip} from "antd";
import {  Table } from "antd";

import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import style from "./index.module.css";


//引入api中请求的方法
import { getHosSetListRequest ,deleteHosSetFromIdRequest,batchDeleteHosRequest} from "@/api/hospital/hospitalSet";
import {getHosSetListRecodesType,getHosSetListItemsType} from '@api/hospital/model/hospitalSetTypes'
import { useNavigate } from "react-router-dom";

interface searchHosFinishPraType{
  hosname?:string,
  hoscode?:string
}
export default function HospitalSet() {
  //使用编程式路由导航hook
  const navigate=useNavigate();
 
  //data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
  const [tableData,setTableData]=useState<getHosSetListRecodesType>([])
   //定义current(当前页码)的state[useState的泛型根据我们传入的参数推论出来了
   const [current,setCurrent]=useState(1)
   //定义total(总个数)的state
   const [total,setTotal]=useState(0)
   //定义pageSize(每页的数量)的state
   const [pageSize,setPageSize]=useState(3)
    //定义isLoading(table是否加载中)
    const [isLoading,setIsLoading]=useState(false);
    const [fieldValue,setFieldValue]=useState<searchHosFinishPraType>({})
   //定义一个state,专门用来触发useEffect的执行,重新加载
    const [reRender,setReRender]=useState(true)
   //定义一个控制批量删除按钮的一个状态
    const [isSelect, setIsSelecte]=useState(true);
    //定义一个 保存批量选中的ids的状态
    const [bacthSelectIds, setBatchSelectIds]=useState<Key[]>([]);
    //当组件加载的时候,开始请求分页列表的数据
  //注意:异步函数不能作为useEffect的参数,因为useEffect可能会书写return一个函数起到清理作用,如果是异步函数,则return就是异步的了
  useEffect(()=>{
    setIsLoading(true)
     //封装一个请求函数才可以,记得后续调用
     const getHosSetList=async()=>{
        const result=await getHosSetListRequest({
            page:current,
            limit:pageSize,
            ...fieldValue
        });
        // console.log(result,'result');
         //1.把得到的结果中records数据(医院列表的数组)设置给state
        setTableData(result.records);
         //2.把得到的结果中 数据的总长度设置给state
        setTotal(result.total)
         //请求完成后要把isLoading修改为false 
         setIsLoading(false)
        
     }
     getHosSetList();
  },[current,pageSize,fieldValue,reRender])
  //colums是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
  //render函数的第三个参数是当前的数据的下标
  //正常要求columns中要有key 但是如果书写了dataIndex 则可以省略key
  const columns = [
    {
      title: "序号",
      width:60,
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
    },
    {
      title: "联系人手机",
      dataIndex: "contactsPhone",
    },
    {
      title: "操作",
      width:120,
      fixed: "right" as "right",
      dataIndex:'do',
      render(_:any,data:getHosSetListItemsType) {
        const {id}=data;
        return (
          <div>
           <Tooltip title='修改医院'>
           <Button
            onClick={()=>{navigate(`/syt/hospital/updatehosset/${id}`)}}
              type="primary"
              icon={<EditOutlined />}
              className={style.mr}
            ></Button>
           </Tooltip>
            <Tooltip title='删除医院'>
            <Button type="primary"
             danger icon={<DeleteOutlined />}
             onClick={deleteHosHandle(id)}
             ></Button>
            </Tooltip>
          </div>
        );
      },
    },
  ];
  //data是表格的数据 每一个对象的中的key和columns中的dataIndex一一对象展示数据
 

   //事件回调函数
  //1.点击页码以后的事件回调函数
  const pageChangeHandle=(current:number,pageSize:number)=>{
    //参数1page:当前点击的页码  参数2 pageSize:每页条数
    //点击以后给state设置page和pageSize的值
    setCurrent(current)
    setPageSize(pageSize)
  }
   //2.点击查询提交表单的事件回调函数
   const searchHosFinishHandle=(FieldValue:searchHosFinishPraType)=>{
     //参数是收集当前表单的值 组成的对象
    setFieldValue(FieldValue)
   }

  //  3.添加医院事件回调函数
  const addHosHandle=()=>{
    //编程式路由导航跳转
    navigate("/syt/hospital/addhosSet")
  }

  //4.删除单个医院的事件回调函数
  const deleteHosHandle=(id:number)=>{
    return async()=>{
      await deleteHosSetFromIdRequest(id);
      //重新渲染
      setReRender(!reRender)
      message.success('删除医院成功')
    }
  }

  //5.批量删除按钮事件回调函数
  const batchDeleteHandle=async()=>{
     //发送批量删除请求
     await batchDeleteHosRequest(bacthSelectIds)
     //重新渲染
     setReRender(!reRender)
     message.success("批量删除成功");

     //把批量删除按钮恢复
    setIsSelecte(true)

  }
  return (
    <div className={style.outer}>
        <Card>
      <Form name="basic" wrapperCol={{ span: 30 }}
       layout="inline"
       onFinish={searchHosFinishHandle}
       >
        <Form.Item name="hosname">
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="hoscode">
          <Input placeholder="医院编号" />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>
      <div className={style.mt}>
        <Button type="primary"onClick={addHosHandle} className={style.mr}>
          添加
        </Button>
        <Button type="primary" danger disabled={isSelect} onClick={batchDeleteHandle}>
          批量删除
        </Button>
      </div>
      <Table
        className={style.mt}
        columns={columns}
        dataSource={tableData}
        rowKey='id'
        loading={isLoading}
        rowSelection={{
          onChange(ids:Key[],datas:getHosSetListItemsType[]){
           //设置控制批量删除按钮state的状态
            setIsSelecte(!ids.length)
            //当选项框被修改的时候,实时的修改保存所有被选中id的状态
            setBatchSelectIds(ids);
          }
        }}
        scroll={{ x: 1100 }}
        bordered
        pagination={{
          //页码的配置：当前页码
          current,
          //总数据的数量
          total,
          //每页条数
          pageSize,
          //展示更改每页条数的选项(默认total大于50条的时候开启)
          pageSizeOptions: [ 3, 5, 8],
          //是否直接开启更新每页条数的选项
          showSizeChanger: true,

          showTotal(total){
            return `总共有${total}条数据`
          },

          onChange:pageChangeHandle
        }}
      />
      </Card>
    </div>
  );
}
